/**
`useId`  是 React 18 中新增的一个 Hook，主要用于生成唯一的 ID，以便在组件中使用，特别是在处理表单元素和可访问性（accessibility）时非常有用。
  1. 基本概念
  -  `useId`  用于生成一个唯一的 ID 字符串，确保在同一组件的多次渲染中保持一致。
  - 生成的 ID 可以用于为表单控件、ARIA 属性等提供唯一标识，帮助提高可访问性。

  2. 使用方式
  使用  `useId`  非常简单，只需在函数组件中调用它即可：
  import React, { useId } from 'react';

  const MyComponent = () => {
    const id = useId();

    return (
      <div>
        <label htmlFor={id}>Label for input</label>
        <input id={id} type="text" />
      </div>
    );
  };
  3. 特点
  - 唯一性：生成的 ID 在同一组件的多次渲染中保持一致，避免了在 React 渲染过程中可能出现的 ID 冲突。
  - 可访问性：使用唯一 ID 可以帮助屏幕阅读器等辅助技术正确识别和关联标签与输入框，提高应用的可访问性。
  - 无副作用： `useId`  是一个无副作用的 Hook，调用它不会导致组件的重新渲染。

  4. 注意事项
  - SSR（服务器端渲染）：在服务器端渲染时， `useId`  生成的 ID 在客户端和服务器端应该保持一致，以避免 hydration 时的 ID 不匹配问题。
  - 在循环中使用：如果在循环中使用  `useId` ，每次渲染都会生成新的 ID，因此在循环中的每个元素都应单独调用  `useId` 。

  5. 总结
  `useId`  是一个非常实用的 Hook，特别适用于需要生成唯一标识符的场景。它简化了 ID 的管理，提高了可访问性，并确保在组件的多次渲染中保持一致性。通过合理使用  `useId` ，开发者可以更有效地构建符合可访问性标准的 React 应用。
 */
import React, { memo, useId, useState } from 'react'

const App = memo(() => {
  const [count, setCount] = useState(0)

  const id = useId()
  console.log(id);
  
  return (
    <div>
      <button onClick={e => setCount(count+1)}>count+1:{count}</button>
      <label htmlFor={id}>
        用户名:<input id={id} type="text" />
      </label>
    </div>
  )
})

export default App